<!--
 * @Date         : 2023-11-22 17:12:29
 * @Description  : 横向电影卡片
 * @LastEditTime : 2024-03-12 13:42:41
-->

<template>
  <view class="film-card-horizontal" @click="onClickFilm">
    <view class="relative">
      <view v-for="(vitem, vindex) in versions" :key="vindex" class="film-version" :style="[versionStyle(vindex)]">{{ vitem }}</view>
      <view v-if="film.trailer" class="play-btn" @click.stop="handlePlayVideo">
        <zm-icon name="play" color="#333333" size="24rpx"></zm-icon>
      </view>
      <u-image :src="film.cover" width="154rpx" height="216rpx" radius="12rpx" @load="init = true"></u-image>
    </view>
    <view class="flex flex-1 flex-col mx-15">
      <zm-text-highlight ref="nameText" font-size="32rpx" font-weight="bold" custom-class="mt-5" :text="film.filmName" :match="keyword"></zm-text-highlight>
      <view class="flex items-center mt-12">
        <!-- 想看 -->
        <view v-if="film.preSaleFlag == 1 || film.preSaleFlag == 2" class="flex items-center">
          <text class="count-text font-bold font-26">{{ film.wantView | formatNumberWithUnit }}</text>
          <text>人想看</text>
          <view class="vertical-line"></view>
        </view>
        <!-- 上映时间 -->
        <view v-if="film.preSaleFlag == 1 || film.preSaleFlag == 2" class="text-666 ml-10">{{ film.publishDate | formatWeekDesc }}上映</view>
        <!-- 评分 -->
        <view v-else class="flex items-center">
          <text>评分</text>
          <text v-if="film.score == 0" class="count-text font-26 font-bold mx-2">暂无评分</text>
          <text v-else class="count-text font-26 font-bold mx-2">{{ film.score | formatDigit({ decimalPlaces: 1, trimZero: false }) }}</text>
        </view>
      </view>
      <view class="text-666 text-row-1 mt-12">导演：{{ film.director }}</view>
      <view class="text-666 text-row-1 mt-10">主演：{{ film.cast }}</view>
    </view>
    <view v-if="showButton" class="flex items-center">
      <zm-button
        v-if="film.preSaleFlag == 0"
        custom-class="mt-10"
        size="small"
        width="104rpx"
        height="54rpx"
        text-size="26rpx"
        round
        :custom-style="themeButtonStyle"
        @click.stop="onClickBuy"
        >购票</zm-button
      >
      <zm-button
        v-else-if="film.preSaleFlag == 1"
        custom-class="mt-10"
        type="success"
        size="small"
        width="104rpx"
        height="54rpx"
        text-size="26rpx"
        round
        custom-style="box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(21, 195, 102,0.16);"
        @click.stop="onClickBuy"
      >
        预售
      </zm-button>
      <zm-button
        v-else-if="film.preSaleFlag == 2 && film.isCollect == 1"
        custom-class="mt-10"
        type="default"
        size="small"
        width="104rpx"
        height="54rpx"
        text-size="26rpx"
        text-color="#999999"
        border-color="#cccccc"
        plain
        round
        @click.stop="onClickCollect"
      >
        已想看
      </zm-button>
      <zm-button
        v-else-if="film.preSaleFlag == 2"
        custom-class="mt-10"
        type="warning"
        size="small"
        width="104rpx"
        height="54rpx"
        text-size="26rpx"
        round
        custom-style="box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255, 165, 26,0.16);"
        @click.stop="onClickCollect"
      >
        想看
      </zm-button>
    </view>
    <!-- 颜色分析 -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <zm-color-analysis v-if="init" :url="film.cover" :max-colors="1" :match-colors="filmCoverColors" @finish="handleOnColorAnalysisFinish"></zm-color-analysis> -->
    <!-- #endif -->
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import { mitt } from "@/utils/mitt"
import { mapGetters } from "vuex"
export default {
  name: "film-card-horizontal",
  mixins: [hook, weixin],
  props: {
    // 数据
    data: { type: Object, default: () => ({}) },
    // 关键字，名称会高亮
    keyword: { type: String, default: "" },
    // 是否显示按钮
    showButton: { type: Boolean, default: true }
  },
  data() {
    return {
      init: false,
      film: {},
      matchColor: "#4a4747"
    }
  },
  computed: {
    ...mapGetters(["filmCoverColors"]),
    themeButtonStyle() {
      const style = {}
      const { r, g, b } = uni.$hexToRgb(this.themeColor)
      style["box-shadow"] = `0rpx 3rpx 6rpx 1rpx rgba(${r}, ${g}, ${b},0.16)`
      return style
    },
    versions() {
      return this.film?.versions?.filter((version) => !["2D", "3D"].includes(version)) || []
    },
    versionStyle() {
      return (index) => {
        const style = {}
        style.top = 8 + index * 30 + "rpx"
        return style
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        this.film = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    onClickFilm() {
      this.toView({
        url: "pages/cinema/film-info/film-info",
        params: {
          color: this.matchColor,
          filmId: this.film.filmId,
          filmCode: this.film.filmCode
        }
      })
    },
    onClickBuy() {
      this.toView({
        url: "pages/cinema/cinema-list-film/cinema-list-film",
        params: {
          filmCode: this.data.filmCode,
          filmName: this.data.filmName,
          filmId: this.data.filmId,
          publishDate: this.data.publishDate
        }
      })
    },
    // 点击想看
    onClickCollect() {
      uni.$debounce(async () => {
        const res = await uni.$api.film.filmCollection({ filmId: this.film.filmId })
        this.film.isCollect = res.collectionType
        this.$forceUpdate()
        if (res.collectionType == 1) uni.$toast("已同步至我的想看页面")
        this.$emit("collect", this.film)
      }, 300)
    },
    // 播放视频
    handlePlayVideo() {
      const route = this.useCurrentRoute()
      mitt.emit(`${route}-showFilmTrailer`, this.film.trailer)
    },
    // 颜色分析结果
    handleOnColorAnalysisFinish(colors) {
      if (colors?.length) {
        this.matchColor = colors[0]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.film-card-horizontal {
  display: flex;
  padding: 30rpx 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .count-text {
    color: #ffa51a;
  }
  .film-version {
    top: 8rpx;
    left: 8rpx;
    z-index: 1;
    height: 26rpx;
    display: flex;
    padding: 0 6rpx;
    font-size: 18rpx;
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    border-radius: 4rpx;
    align-items: center;
    background-color: #000000;
  }
  .play-btn {
    z-index: 1;
    right: 12rpx;
    bottom: 12rpx;
    width: 46rpx;
    height: 46rpx;
    display: flex;
    position: absolute;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
  }
}
</style>
